<template>
	<view>
		<z-paging-swiper>
			<view slot="top">
				<view class="bg-white u-p-r-28">
					<view>
						<u-tabs-swiper active-color="#FFCF0B" ref="uTabs" :list="communityList" :current="current"
							@change="tabsChange" :is-scroll="false"></u-tabs-swiper>
					</view>
				</view>
			</view>
			<!-- 滑动区域 -->
			<swiper style="height: 100%;" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item v-for="(item,index) in communityList" :key="index">
					<no-data v-if="dataList[index].length === 0" customClass="bg-f5"></no-data>
					<view class="content">
						<z-paging @onRefresh="onRefresh" :hide-empty-view="true" auto-show-back-to-top ref="paging"
							@query="queryList" :fixed="false" :auto="false" style="height: 100%;"
							loading-more-no-more-text="暂无更多">
							<view>
								<view class="u-p-l-28 u-p-r-28" v-for="(item,idx) in dataList[index]" :key="idx">
									<community-card :item="item"></community-card>
								</view>
							</view>
						</z-paging>
					</view>
				</swiper-item>
			</swiper>
		</z-paging-swiper>


		<!-- 发布按钮 -->
		<u-image @click="goPostMessageAdd" class="publish-btn" src="@/static/index/add.png" width="42px" height="42px">
		</u-image>


		<u-tabbar :list="tabBar" active-color="#FFCF0B" inactive-color="#808080" :border-top="false"></u-tabbar>
	</view>
</template>

<script>
	import communitySwiperItem from '@/components/communitySwiperItem/communitySwiperItem.vue';
	import communityCard from '@/components/communityCard/communityCard.vue';
	import noData from '@/components/noData/noData.vue';
	import {
		communityList,
		tabBar
	} from '@/const';
	import {
		getCommunityList
	} from '@/api/community';
	import {
		getUserInfo
	} from '@/api/user';
	export default {
		components: {
			communityCard,
			noData,
			communitySwiperItem
		},
		data() {
			return {
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

				communityList: [{
						name: '全部',
						id: 0,
					},
					...communityList
				],
				dataList: [],
				tabBar,
			}
		},
		onShow() {
			this.init();
			const access_token = uni.getStorageSync('access_token');
			if (access_token) {
				this.getUserInfo();
			}
		},
		methods: {
			async getUserInfo() {
				const res = await getUserInfo();
				const count = res.data.message_unread;
				this.tabBar = tabBar.map((item, index) => {
					if (index === 3) {
						item.count = count;
					}
					return item;
				})
			},
			onRefresh() {
				this.$set(this.dataList, this.swiperCurrent, []);
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			async queryList(page, pageSize) {
				const postData = Object.assign({}, {
					page,
					pageSize,
					category_id: this.swiperCurrent,
				})
				const res = await getCommunityList(postData);
				const newData = res.data.list;
				this.$refs.paging[this.swiperCurrent].complete(newData);
				const oldData = this.dataList[this.swiperCurrent];
				this.$set(this.dataList, this.swiperCurrent, oldData.concat(newData));
			},
			async init() {
				const postData1 = {
					page: 1,
					pageSize: 10,
					category_id: 0,
				}

				const postData2 = {
					page: 1,
					pageSize: 10,
					category_id: 1,
				}

				const postData3 = {
					page: 1,
					pageSize: 10,
					category_id: 2,
				}

				const postData4 = {
					page: 1,
					pageSize: 10,
					category_id: 3,
				}
				const postData5 = {
					page: 1,
					pageSize: 10,
					category_id: 4,
				}
				const res1 = await getCommunityList(postData1);
				const res2 = await getCommunityList(postData2);
				const res3 = await getCommunityList(postData3);
				const res4 = await getCommunityList(postData4);
				const res5 = await getCommunityList(postData5);
				this.dataList = [
					res1.data.list,
					res2.data.list,
					res3.data.list,
					res4.data.list,
					res5.data.list,
				]
			},
			goPostMessageAdd() {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",

					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);

				} else {
					uni.navigateTo({
						url: '/pagesCommunity/postMessage/postMessage'
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.publish-btn {
		position: fixed;
		right: 14px;
		bottom: 150px;
		z-index: 1;
	}

	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}
</style>
